<template>
  <!-- 总的包裹容器 -->
  <div class="payContainer">
    <!-- 支付头文字提示 -->
    <div class="payheader">请选择支付方式</div>

    <div class="pay">
      <!-- 微信支付 -->
      <div class="wxpay">
        <van-checkbox
          v-model="checked"
          checked-color="#b4282d"
          icon-size=".5rem"
          @click="!checked"
        >
          <div class="wxcont">
            <img class="img-icon" src="./images/微信支付.svg" />
            <span>微信支付</span>
          </div>
        </van-checkbox>
        <div class="van-hairline--bottom"></div>
      </div>
    </div>

    <!-- <div class="pay">
       支付宝支付 
     <div class="wxpay">
        <van-checkbox
          v-model="checked"
          checked-color="#b4282d"
          icon-size=".5rem"
          @click="!checked"
        >
          <div class="wxcont">
            <img class="img-icon" src="./images/支付宝(1).svg" />
            <span>支付宝</span>
          </div>
        </van-checkbox>
        <div class="van-hairline--bottom"></div>
      </div>
    </div>  -->

    <!-- <div class="pay">
       网易支付 
    <div class="wxpay">
        <van-checkbox
          v-model="checked"
          checked-color="#b4282d"
          icon-size=".5rem"
          @click="!checked"
        >
          <div class="wxcont">
            <img class="img-icon" src="./images/网易支付-01.svg" />
            <span>网易支付</span>
          </div>
        </van-checkbox>
      </div>
    </div>
    <div class="van-hairline--bottom"></div> -->

    <!-- 确定提交按钮 -->
    <div class="bot"></div>
    <div class="btnbot">
      <van-button type="danger" block @click="toperson"> 确定 </van-button>
    </div>
    <van-popup v-model="show" class="checkaplay">请选择支付方式</van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'payOrder',
  data() {
    return {
      checked: false,
      show: false,
    }
  },
  methods: {
    toperson() {
      if (!this.checked) {
        this.show = true
        return
      }
      setTimeout(() => {
        Toast.success('支付成功')
      }, 2000)

      setTimeout(() => {
        this.$router.push('/src/pages//personal')
      }, 5000)

      Toast.loading({ message: '支付中...', forbidClick: true })
    },
  },
}
</script>

<style lang="less" scoped>
// /总的包裹容器
.payContainer {
  background-color: #eee;
  .img-icon {
    line-height: 0.53333rem;
   
  }
   .checkaplay {
      font-size: .4rem;
      text-align: center;
      line-height: 1rem;
      width: 4rem;
      height: 1rem;
    }
  // 头部
  .payheader {
    color: #999;
    font-size: 0.1rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: 0.5rem;
    margin-left: 0.5rem;
    padding-top: 0.3rem;
  }
  // 支付
  .pay {
    box-sizing: border-box;
    padding: 0.5rem 1rem 1rem 0.5rem;
    background-color: #fff;
    height: 1.3rem;
    text-align: 1.3rem;
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 0.5rem;
    .img-icon {
      height: 20px;
    }
    // 微信支付
    .wxpay {
      height: 1rem;

      .wxcont {
        position: relative;
        margin-left: 0.2rem;
        line-height: 0.83333rem;
        // margin-bottom: 0.9rem;
        img {
          position: absolute;
          top: 0.18rem;
        }
        span {
          margin-left: 1rem;
          margin-top: 1rem;
          height: 0.9rem;
          line-height: 0.9rem;
        }
      }
    }
  }

  // 提交按钮
  .btnbot {
    position: absolute;
    width: 100%;
    bottom: 1.2rem;
  }
}
</style>
